<nz-card>
    <div class="common-search-wrap">
        <div class="common-search-forms">
            <div class="common-form-item">
                <label class="common-search-label">日期</label>
                <div class="common-search-conrol">
                    <nz-range-picker
                        [nzRanges]="ranges"
                        [(ngModel)]="dateArrs"
                        (ngModelChange)="dateChange($event, 0)">
                    </nz-range-picker>
                </div>
            </div>

            <div class="common-form-item">
                <div class="common-search-conrol">
                    <button nz-button nzType="primary" class="m-r-8" (click)="seachData(0)">查询</button>
                    <button nz-button nzType="default" (click)="resetData(0)">重置</button>
                </div>
            </div>
        </div>
    </div>
</nz-card>

<nz-spin nzTip="Loading..." [nzSpinning]="topLoading">
    <div class="p-t-10 static-card-wrap" nz-row [nzGutter]="[24, 10]">
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-ash">
                <p class="quantity-name">总爱豆</p>
                <p class="quantity-number">{{ censusTopData?.amount || '0' }}</p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-ash">
                <p class="quantity-name">爱豆收入</p>
                <p class="quantity-number">{{ censusTopData?.income || '0' }}</p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-ash">
                <p class="quantity-name">爱豆支出</p>
                <p class="quantity-number">{{ censusTopData?.expend || '0' }}</p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-yellow">
                <p class="quantity-name">人工调整</p>
                <p class="quantity-number">{{ censusTopData?.artificial || '0' }}</p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-ash">
                <p class="quantity-name">总收益</p>
                <p class="quantity-number">{{ censusTopData?.sumIncome || '0' }}</p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-ash">
                <p class="quantity-name">待到账</p>
                <p class="quantity-number">
                    {{ censusTopData?.noArrival || '0' }}<span class="quantity-scale">{{ percentageFilter(censusTopData?.noArrivalPercentage) }}</span>
                </p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-ash">
                <p class="quantity-name">已到账</p>
                <p class="quantity-number">
                    {{ censusTopData?.arrival || '0' }}<span class="quantity-scale">{{ percentageFilter(censusTopData?.arrivalPercentage) }}</span>
                </p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-ash">
                <p class="quantity-name">已失效</p>
                <p class="quantity-number">{{ censusTopData?.invalid || '0' }}</p>
            </nz-card>
        </div>

        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-green">
                <p class="quantity-name">定制分成</p>
                <p class="quantity-number">
                    {{ censusTopData?.adz || '0' }}<span class="quantity-scale">{{ percentageFilter(censusTopData?.adzPercentage) }}</span>
                </p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-green">
                <p class="quantity-name">红包分成</p>
                <p class="quantity-number">
                    {{ censusTopData?.redPacket || '0' }}<span class="quantity-scale">{{ percentageFilter(censusTopData?.redPacketPercentage) }}</span>
                </p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-green">
                <p class="quantity-name">爱乐物-推广分成</p>
                <p class="quantity-number">
                    {{ censusTopData?.alw || '0' }}<span class="quantity-scale">{{ percentageFilter(censusTopData?.alwPercentage) }}</span>
                </p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-green">
                <p class="quantity-name">爱思助手-推广分成</p>
                <p class="quantity-number">
                    {{ censusTopData?.aisi || '0' }}<span class="quantity-scale">{{ percentageFilter(censusTopData?.aisiPercentage) }}</span>
                </p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-green">
                <p class="quantity-name">游戏-推广分成</p>
                <p class="quantity-number">
                    {{ censusTopData?.gameDivide || '0' }}<span class="quantity-scale">{{ percentageFilter(censusTopData?.gameDividePercentage) }}</span>
                </p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-green">
                <p class="quantity-name">爱思回收-推广分成</p>
                <p class="quantity-number">
                    {{ censusTopData?.aiSiRecovery || '0' }}<span class="quantity-scale">{{ percentageFilter(censusTopData?.aiSiRecoveryPercentage) }}</span>
                </p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-green">
                <p class="quantity-name">二手订单退还</p>
                <p class="quantity-number">
                    {{ censusTopData?.secondOrderReturn || '0' }}<span class="quantity-scale">{{ percentageFilter(censusTopData?.secondOrderReturnPercentage) }}</span>
                </p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-green">
                <p class="quantity-name">定制订单退还</p>
                <p class="quantity-number">
                    {{ censusTopData?.adzReturn || '0' }}<span class="quantity-scale">{{ percentageFilter(censusTopData?.adzReturnPercentage) }}</span>
                </p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-green">
                <p class="quantity-name">配件订单退还</p>
                <p class="quantity-number">
                    {{ censusTopData?.orderReturn || '0' }}<span class="quantity-scale">{{ percentageFilter(censusTopData?.orderReturnPercentage) }}</span>
                </p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-green">
                <p class="quantity-name">红包退还</p>
                <p class="quantity-number">
                    {{ censusTopData?.redPacketReturn || '0' }}<span class="quantity-scale">{{ percentageFilter(censusTopData?.redPacketReturnPercentage) }}</span>
                </p>
            </nz-card>
        </div>

        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-green">
                <p class="quantity-name">购买爱豆</p>
                <p class="quantity-number">
                    {{ censusTopData?.idol || '0' }}<span class="quantity-scale">{{ percentageFilter(censusTopData?.idolPercentage) }}</span>
                </p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-green">
                <p class="quantity-name">活动奖励</p>
                <p class="quantity-number">
                    {{ censusTopData?.activity || '0' }}<span class="quantity-scale">{{ percentageFilter(censusTopData?.activityPercentage) }}</span>
                </p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-green">
                <p class="quantity-name">图纸会员退还</p>
                <p class="quantity-number">
                    {{ censusTopData?.drawingReturn || '0' }}<span class="quantity-scale">{{ percentageFilter(censusTopData?.drawingReturnPercentage) }}</span>
                </p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-green">
                <p class="quantity-name">充值专区退还</p>
                <p class="quantity-number">
                    {{ censusTopData?.rechargeReturn || '0' }}<span class="quantity-scale">{{ percentageFilter(censusTopData?.rechargeReturnPercentage) }}</span>
                </p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-green">
                <p class="quantity-name">回收成交</p>
                <p class="quantity-number">
                    {{ censusTopData?.recoveryDeal || '0' }}<span class="quantity-scale">{{ percentageFilter(censusTopData?.recoveryDealPercentage) }}</span>
                </p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-red">
                <p class="quantity-name">游戏消费</p>
                <p class="quantity-number">
                    {{ censusTopData?.game || '0' }}<span class="quantity-scale">{{ percentageFilter(censusTopData?.gamePercentage) }}</span>
                </p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-red">
                <p class="quantity-name">验机消费</p>
                <p class="quantity-number">
                    {{ censusTopData?.test || '0' }}<span class="quantity-scale">{{ percentageFilter(censusTopData?.testPercentage) }}</span>
                </p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-red">
                <p class="quantity-name">兑换京东卡</p>
                <p class="quantity-number">
                    {{ censusTopData?.jd || '0' }}<span class="quantity-scale">{{ percentageFilter(censusTopData?.jdPercentage) }}</span>
                </p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-red">
                <p class="quantity-name">二手订单消费</p>
                <p class="quantity-number">
                    {{ censusTopData?.secondOrderConsume || '0' }}<span class="quantity-scale">{{ percentageFilter(censusTopData?.secondOrderConsumePercentage) }}</span>
                </p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-red">
                <p class="quantity-name">配件订单消费</p>
                <p class="quantity-number">
                    {{ censusTopData?.orderConsume || '0' }}<span class="quantity-scale">{{ percentageFilter(censusTopData?.orderConsumePercentage) }}</span>
                </p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-red">
                <p class="quantity-name">定制订单消费</p>
                <p class="quantity-number">
                    {{ censusTopData?.adzConsume || '0' }}<span class="quantity-scale">{{ percentageFilter(censusTopData?.adzConsumePercentage) }}</span>
                </p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-red">
                <p class="quantity-name">红包消费</p>
                <p class="quantity-number">
                    {{ censusTopData?.customizedConsume || '0' }}<span class="quantity-scale">{{ percentageFilter(censusTopData?.customizedConsumePercentage) }}</span>
                </p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-red">
                <p class="quantity-name">图纸会员消费</p>
                <p class="quantity-number">
                    {{ censusTopData?.drawingConsume || '0' }}<span class="quantity-scale">{{ percentageFilter(censusTopData?.drawingConsumePercentage) }}</span>
                </p>
            </nz-card>
        </div>
        <div nz-col nzSpan="3">
            <nz-card [nzSize]="cardSize" class="quantity-card card-red">
                <p class="quantity-name">充值专区消费</p>
                <p class="quantity-number">
                    {{ censusTopData?.rechargeConsume || '0' }}<span class="quantity-scale">{{ percentageFilter(censusTopData?.rechargeConsumePercentage) }}</span>
                </p>
            </nz-card>
        </div>
    </div>
</nz-spin>

<nz-card class="m-t-12">
    <div class="common-search-wrap">
        <div class="common-search-forms">
            <div class="common-form-item">
                <label class="common-search-label">日期</label>
                <div class="common-search-conrol">
                    <nz-range-picker
                        [nzAllowClear]="false"
                        [nzRanges]="chartRanges"
                        [(ngModel)]="chartDateArrs"
                        (ngModelChange)="dateChange($event, 1)">
                    </nz-range-picker>
                </div>
            </div>

            <div class="common-form-item">
                <div class="common-search-conrol">
                    <button nz-button nzType="primary" class="m-r-8" (click)="seachData(1)">查询</button>
                    <button nz-button nzType="default" (click)="resetData(1)">重置</button>
                </div>
            </div>
        </div>
    </div>
</nz-card>

<div class="chart-wrap m-t-12">
    <div class="chart-head">
        <span class="chart-title p-r-15">收入数据</span>
        <button nz-button nzType="link" (click)="isIncomeVisible = true">表格数据</button>
        <button nz-button nzType="link" (click)="exportTable(0)">导出</button>
    </div>
    
    <div class="chart-box">
        <nz-spin nzTip="Loading..." [nzSpinning]="chartsLoading">
            <ng-container *ngIf="incomeChartConfig?.legendData?.length;else templateChart0">
                <app-line-chart #incomeLineRef [idNum]="1" [chartConfig]="incomeChartConfig"></app-line-chart>
            </ng-container>
            <ng-template #templateChart0>
                <div class="no-data">
                    <nz-empty></nz-empty>
                </div>
            </ng-template>
        </nz-spin>
    </div>
</div>

<div class="chart-wrap m-t-12">
    <div class="chart-head">
        <span class="chart-title p-r-15">支出数据</span>
        <button nz-button nzType="link" (click)="isExpendVisible = true">表格数据</button>
        <button nz-button nzType="link" (click)="exportTable(1)">导出</button>
    </div>
    
    <div class="chart-box">
        <nz-spin nzTip="Loading..." [nzSpinning]="chartsLoading">
            <ng-container *ngIf="expendChartConfig?.legendData?.length;else templateChart1">
                <app-line-chart #outLineRef [idNum]="2" [chartConfig]="expendChartConfig"></app-line-chart>
            </ng-container>
            <ng-template #templateChart1>
                <div class="no-data">
                    <nz-empty></nz-empty>
                </div>
            </ng-template>
        </nz-spin>
    </div>
</div>

<!-- S 收入tbale -->
<nz-modal
    [(nzVisible)]="isIncomeVisible"
    nzWidth="1200px"
    nzTitle="收入数据"
    [nzFooter]="null"
    (nzOnCancel)="handleCancel()">
    <ng-container *nzModalContent>
        <div class="table-wrap">
            <nz-table
              #incomeTable
              nzSize="small"
              nzShowSizeChanger
              nzShowQuickJumper
              nzOuterBordered
              [nzScroll]="{ x: '1100px', y: '600px' }"
              [nzFrontPagination]="false"
              [nzLoadingDelay]="100"
              [nzData]="incomeTableData"
            >
                <thead>
                    <tr>
                        <th nzAlign="center" nzWidth="103px" nzLeft>日期</th>
                        <th nzAlign="center" nzWidth="103px">定制分成</th>
                        <th nzAlign="center" nzWidth="103px">红包分成</th>
                        <th nzAlign="center" nzWidth="130px">爱乐物-推广分成</th>
                        <th nzAlign="center" nzWidth="140px">爱思助手-推广分成</th>
                        <th nzAlign="center" nzWidth="130px">游戏-推广分成</th>
                        <th nzAlign="center" nzWidth="140px">爱思回收-推广分成</th>
                        <th nzAlign="center" nzWidth="130px">二手订单退还</th>
                        <th nzAlign="center" nzWidth="103px">定制订单退还</th>
                        <th nzAlign="center" nzWidth="103px">配件订单退还</th>
                        <th nzAlign="center" nzWidth="103px">红包退还</th>
                        <th nzAlign="center" nzWidth="103px">购买爱豆</th>
                        <th nzAlign="center" nzWidth="103px">活动奖励</th>
                        <th nzAlign="center" nzWidth="103px">图纸会员退还</th>
                        <th nzAlign="center" nzWidth="103px">充值专区退还</th>
                        <th nzAlign="center" nzWidth="103px">今日收入</th>
                        <th nzAlign="center" nzWidth="103px">回收成交</th>
                    </tr>
                </thead>
        
                <tbody>
                    <tr *ngFor="let data of incomeTable.data; let index = index;">
                        <!-- 日期 -->
                        <td nzAlign="center" nzLeft>{{ data['DAY_SHORT_DESC'] || '-' }}</td>
                        <!-- 定制分成 -->
                        <td nzAlign="center">{{ data.adz || '0' }}</td>
                        <!-- 红包分成 -->
                        <td nzAlign="center">{{ data.redPacket || '0' }}</td>
                        <!-- 爱乐物-推广分成 -->
                        <td nzAlign="center">{{ data.alw || '0' }}</td>
                        <!-- 爱思助手-推广分成 -->
                        <td nzAlign="center">{{ data.aisi || '0' }}</td>
                        <!-- 游戏-推广分成 -->
                        <td nzAlign="center">{{ data.gameDivide || '0' }}</td>
                        <!-- 爱思回收-推广分成 -->
                        <td nzAlign="center">{{ data.aiSiRecovery || '0' }}</td>
                        <!-- 二手订单退还 -->
                        <td nzAlign="center">{{ data.secondOrderReturn || '0' }}</td>
                        <!-- 定制订单退还 -->
                        <td nzAlign="center">{{ data.adzReturn || '0' }}</td>
                        <!-- 配件订单退还 -->
                        <td nzAlign="center">{{ data.orderReturn || '0' }}</td>
                        <!-- 红包退还 -->
                        <td nzAlign="center">{{ data.redPacketReturn || '0' }}</td>
                        <!-- 购买爱豆 -->
                        <td nzAlign="center">{{ data.idol || '0' }}</td>
                        <!-- 活动奖励 -->
                        <td nzAlign="center">{{ data.activity || '0' }}</td>
                        <!-- 图纸会员退还 -->
                        <td nzAlign="center">{{ data.drawingReturn || '0' }}</td>
                        <!-- 充值专区退还 -->
                        <td nzAlign="center">{{ data.rechargeReturn || '0' }}</td>
                        <!-- 今日收入 -->
                        <td nzAlign="center">{{ data.sumAmount || '0' }}</td>
                        <!-- 回收成交 -->
                        <td nzAlign="center">{{ data.recoveryDeal || '0' }}</td>
                    </tr>
                </tbody>
            </nz-table>
        </div>
    </ng-container>
</nz-modal>
<!-- E 收入tbale -->

<!-- S 支出tbale -->
<nz-modal
    [(nzVisible)]="isExpendVisible"
    nzWidth="1100px"
    nzTitle="支出数据"
    [nzFooter]="null"
    (nzOnCancel)="handleCancel()">
    <ng-container *nzModalContent>
        <div class="table-wrap">
            <nz-table
              #modalTable
              nzSize="small"
              nzShowSizeChanger
              nzShowQuickJumper
              nzOuterBordered
              [nzScroll]="{ y: '600px' }"
              [nzFrontPagination]="false"
              [nzLoadingDelay]="100"
              [nzData]="expendTableData"
            >
                <thead>
                    <tr>
                        <th nzAlign="center" nzWidth="129px" nzLeft>日期</th>
                        <th nzAlign="center" nzWidth="129px">游戏消费</th>
                        <th nzAlign="center" nzWidth="129px">验机消费</th>
                        <th nzAlign="center" nzWidth="129px">兑换京东卡</th>
                        <th nzAlign="center" nzWidth="129px">二手订单消费</th>
                        <th nzAlign="center" nzWidth="129px">配件订单消费</th>
                        <th nzAlign="center" nzWidth="129px">定制订单消费</th>
                        <th nzAlign="center" nzWidth="129px">红包消费</th>
                        <th nzAlign="center" nzWidth="129px">图纸会员消费</th>
                        <th nzAlign="center" nzWidth="129px">充值专区消费</th>
                        <th nzAlign="center" nzWidth="129px">今日支出</th>
                    </tr>
                </thead>
        
                <tbody>
                    <tr *ngFor="let data of modalTable.data; let index = index;">
                        <!-- 日期 -->
                        <td nzAlign="center" nzLeft>{{ data['DAY_SHORT_DESC'] || '-' }}</td>
                        <!-- 游戏消费 -->
                        <td nzAlign="center">{{ data.game || '0' }}</td>
                        <!-- 验机消费 -->
                        <td nzAlign="center">{{ data.test || '0' }}</td>
                        <!-- 兑换京东卡 -->
                        <td nzAlign="center">{{ data.jd || '0' }}</td>
                        <!-- 二手订单消费 -->
                        <td nzAlign="center">{{ data.secondOrderConsume || '0' }}</td>
                        <!-- 配件订单消费 -->
                        <td nzAlign="center">{{ data.orderConsume || '0' }}</td>
                        <!-- 定制订单消费 -->
                        <td nzAlign="center">{{ data.adzConsume || '0' }}</td>
                        <!-- 红包消费 -->
                        <td nzAlign="center">{{ data.redPacketConsume || '0' }}</td>
                        <!-- 图纸会员消费 -->
                        <td nzAlign="center">{{ data.drawingConsume || '0' }}</td>
                        <!-- 充值专区消费 -->
                        <td nzAlign="center">{{ data.rechargeConsume || '0' }}</td>
                        <!-- 今日支出 -->
                        <td nzAlign="center">{{ data.sumAmount || '0' }}</td>
                    </tr>
                </tbody>
            </nz-table>
        </div>
    </ng-container>
</nz-modal>
<!-- E 支出tbale -->